import callFeedback from "@/components/common/modalFeedback"
import { BASE_PATH } from "@/config";
import { AutoCenter, Button } from "antd-mobile";
import gsap from 'gsap'
import { PrizeComp } from '@/components/common'
// import { Application } from 'pixi.js'
const prize = async () => {
  const m = callFeedback({
    bodyClassName: `act-feedback-modal rule-modal prize-modal close-at-center-bottom`,
    content: <div className="inner"><PrizeComp /></div>,
    title: <img className="header-img" src={`${BASE_PATH}/img/game/prize-title.png`} alt="" />,
    actions: [],
    // hideClose:true,

    closeOnAction: true,
    closeOnMaskClick: true,
  })
}
const BASE_PATH_TEST = `${process.env.NEXT_PUBLIC_BASE_PATH}`
export const compsite = (rank) => {

  const m = callFeedback({
    bodyClassName: 'compsite-modal',
    // content: <div>内容</div>,
    actions: [],
    hideClose: true,
    closeOnAction: false,
    closeOnMaskClick: false,
    mask: false

  })
  setTimeout(() => {

    // 创建PixiJS应用
    /**
     * @type {import('pixi.js').Application}
     */
    const app = new PIXI.Application({
      width: global.innerWidth,
      height: global.innerHeight,
      backgroundAlpha: 0,
      resolution: global.devicePixelRatio,
      antialias: true
    });
    app.renderer.autoDensity = true
    app.renderer.resize(global.innerWidth, global.innerHeight)
    // 将PixiJS应用画布添加到HTML容器
    document.querySelector('.adm-center-popup-mask').appendChild(app.view);

    // 创建一个舞台
    const stage = new PIXI.Container();
    app.stage.addChild(stage);

    // 用Graphics对象绘制一个圆
    /**
     * @type {import('pixi.js').Graphics}
     */
    const graphics = new PIXI.Graphics();
    graphics.beginFill(0x000000, 0); // 填充颜色
    graphics.drawCircle(app.renderer.width, app.renderer.height, 120); // 绘制圆，圆心坐标和半径
    graphics.endFill();
    graphics.x = 0
    graphics.y = app.renderer.height / 2 - 260

    // 将圆形添加到舞台
    stage.addChild(graphics);
    const guang = new PIXI.Sprite.from(`${BASE_PATH}/img/game/guang-bg.png`)
    guang.anchor.set(0.5)
    guang.x = global.innerWidth / 2
    guang.y = global.innerHeight / 2
    console.log(global.innerHeight / 2)
    guang.width = global.innerWidth
    // app.stage.addChild(guang)
    guang.height = global.innerWidth / 0.75
    guang.zIndex = 0

    // 加载五张图片资源
    const loader = new PIXI.Loader();
    const images = []
    // const imagePaths = [`${BASE_PATH}/img/game/card-beijing.png`, `${BASE_PATH}/img/game/card-shanghai.png`, `${BASE_PATH}/img/game/card-chongqing.png`, `${BASE_PATH}/img/game/card-changchun.png`, `${BASE_PATH}/img/game/card-xizang.png`];
    const imagePaths = [`${BASE_PATH}/game/beijing.jpg`, `${BASE_PATH}/game/shanghai.jpg`, `${BASE_PATH}/game/chongqing.jpg`, `${BASE_PATH}/game/changchun.jpg`, `${BASE_PATH}/game/xizang.jpg`];
    loader.add(imagePaths);
    loader.load(onAssetsLoaded);
    const tweens = []
    const imageSprites = []


    function onAssetsLoaded(loader, resources) {
      const numImages = 5;
      const radius = 100;
      const centerX = app.renderer.width / 2;
      const centerY = app.renderer.height / 2;
      const angleIncrement = (Math.PI * 2) / numImages;
      const rotationIncrement = (Math.PI / 12); // 15度转换为弧度

      // 创建一个时间轴动画
      const tl = gsap.timeline({ onComplete: startRotation });
      // 开始整体旋转所有图片容器
      function startRotation() {
        // gsap.to(imagesContainer, { rotation: Math.PI * 2, duration: 5, repeat: -1, ease: 'linear' });
      }
      // 创建一个容器，用于包含所有的图片
      const imagesContainer = new PIXI.Container();
      // imagesContainer.x = centerX
      // imagesContainer.y = centerY
      // app.stage.addChild()
      imagesContainer.addChild(guang)
      stage.addChild(imagesContainer);

      // 逐个淡入图片
      for (let i = 0; i < numImages; i++) {
        const imageName = imagePaths[i];
        const imageSprite = new PIXI.Sprite(resources[imageName].texture);
        images.push(imageSprite)
        // 设置图片的宽度和高度
        imageSprite.width = 80;
        imageSprite.height = 90;

        // 设置图片的位置
        const angle = angleIncrement * i;

        imageSprite.anchor.set(0.5); // 设置锚点为中心

        // 初始设置图片透明度为0，位置为圆周上
        imageSprite.alpha = 0;
        imageSprite.x = (centerX / global.devicePixelRatio + radius * Math.cos(angle));
        imageSprite.y = (centerY / global.devicePixelRatio + radius * Math.sin(angle));

        imagesContainer.addChild(imageSprite);
        // 创建并行的TweenMax动画，使图片同时移动到圆心
        // 创建移动动画，并添加到时间轴
        // tl.to(imageSprite, { x: 0, y: 0, duration: 1 }, i * 0.2);
        // 使用TweenMax逐个淡入图片
        gsap.to(imageSprite, { alpha: 1, duration: 1, delay: i * 0.5 });
      }
      let step = 1

      setTimeout(() => {
        app.ticker.add((detal) => {
          // console.log('xxxx', detal)
          step++;

          // 让图片在圆周上移动渲染
          images.forEach((imageSprite, index) => {
            const angleOffset = (index / numImages) * (Math.PI * 2); // 角度偏移，确保图片均匀分布
            const angle = (step / 100 + angleOffset) % (Math.PI * 2) * 8; // 控制移动速度

            // 计算新的位置
            const x = centerX / global.devicePixelRatio + radius * Math.cos(angle);
            const y = centerY / global.devicePixelRatio + radius * Math.sin(angle);

            // 更新图片精灵的位置
            imageSprite.x = x;
            imageSprite.y = y;
            // imageSprites.push(imageSprite);


          });
        });
      }, 3000)
      setTimeout(() => {
        // gsap.to(imagesContainer, { x: 0 })
        // app.ticker.stop()
        // return
        m.close()
        const modal = callFeedback({
          bodyClassName: 'act-feedback-modal card-result-modal',
          hideClose: true,
          content: <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', top: '35%', left: '50%', transform: 'translateX(-50%)', color: '#3a746b' }}>您是第{rank}位合成游卡</div>
            <img
              src={`${BASE_PATH}/img/game/card-result-bg.png`}
              width={334}
            />
          </div>,
          actions: [
            <Button className="act-btn act-btn-bevel act-btn-warning" onClick={() => {
              modal.close()
              callFeedback({
                bodyClassName: `act-feedback-modal rule-modal prize-modal close-at-center-bottom`,
                content: <div className="inner">

                  <PrizeComp /></div>,
                title: <img className="header-img" src={`${BASE_PATH}/img/game/prize-title.png`} alt="" />,
                actions: [],
                // hideClose:true,
                closeOnAction: true,
                closeOnMaskClick: true,
              })
            }}>
              去填写信息
            </Button>
          ]
        })
      }, 10000);

      // 整体旋转所有图片
      // gsap.to(imagesContainer, { rotation: rotationIncrement, duration: 1, repeat: -1, yoyo: true });
    }
  }, 100)
}